mixpanelでiframe内のフォームデータをGTMで取得するやり方

マーテック(MarTech)

#mixpanel

#Google Tag Manager

國崎

2023.08.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ミックスパネラーの國崎です。
今回はmixpanelにiframe内のフォームデータをGTMを使って取得させるやり方について解説します。

前提条件

この記事では以下の条件を満たしている方向けへの記事となります。

GTMを使ったmixpanelのタグ埋め込みはできている
iframeの呼び出し元と呼び出し先が異なるドメインである
HTMLのタグを読むくらいはできる

GTMを使ったmixpanelの組み込みについては以下記事で説明しているので、通常の組み込み方法を知りたい方はこちらをご覧ください。

Googleタグマネージャーを使ってMixpanelを初期導入してみる

iframeの情報を取得するための事前準備

mixpanelでiframeのフォームデータをGTMで取得するにあたり、以下の準備が必要になります。

iframeを組み込んでいる親ページとiframe内の子ページのGTMタグをmixpanel計測のGTMタグと揃える

こちらが出来ていないと、iframe内の情報をmixpanelに送信することができないです。
iframe内の子ページにGTMを仕込んでいないケースは多いと思うので、こちらにも仕込むことを失念しないようにしましょう。

GTMでの操作

ここからはGTMでどのような操作を行なったか順を追って解説します。

変数を作成する

まずiframeのフォーム内のデータを取得するための変数をGTM内に作成します。
変数の作り方はGTMのワークスペースにある左メニューの変数を選択。

新規>変数タイプでカスタムJavaScriptを選択。

表示された入力欄にiframe内のフォーム情報を取得するためのJavaScriptを書きます。

参考までに以下一通りのフォーム内の情報を取得するためのコードを記載します。
お使いのフォーム設計により使えない場合もありますので、ご了承ください。

//ページタイトル
function() {
var title = document.title;
return title;
}

//ラジオボタンの選択された要素
function() {
    var tagItems = document.querySelectorAll('取得する要素のクラス名');
    var tagTexts = [];
    tagItems.forEach(function(tag) {
        if (tag.textContent) {
            tagTexts.push(tag.textContent);
        }
    });
    return tagTexts;
}

//チェックボックスの選択された要素
function() {
    var form = document.getElementById('フォームのID');
    var checkedThemes = [];
    if (form) {
        var elements = form.querySelectorAll('フォームのクラス input[type="checkbox"]');
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].checked) {
                var label = form.querySelector('label[for="' + elements[i].id + '"]');
                if (label) {
                    checkedThemes.push(label.textContent);
                }
            }
        }
    }
    return checkedThemes.length > 0 ? checkedThemes.join(", ") : null;
}


//テキストボックスの要素
function() {
    var inquiryInput = document.querySelector('フォームID textarea');
    if (inquiryInput) {
        return inquiryInput.value;
    }
    return null;
}

ここで書くJavaScriptはChatGPTで自動生成することもできます。